<template>
    <div>
        <head-go></head-go>
        <div class="spxq">
            <img :src="require('@/'+Store[sto].src)" height="300" width="400"/>
            <div class="go-car">
                <h2>{{Store[sto].name}}</h2>
                <div class="sell">
                    <span><a href="#5">{{Store[sto].pl}}条评论</a></span>
                    <el-divider direction="vertical"></el-divider>
                    <span>月售{{Store[sto].sell}}</span>
                </div>
                <div style="margin-top: 30px">
                    <template>
                        <button @click.once="flag=!flag" v-if="flag">加入购物车</button>
                        <button @click.once="flag=!flag" v-else>已加购</button>
                    </template>
                    <p><i class="el-icon-warning"></i>（点击加入购物车即可，需要其他备注在购物车填写）</p>
                </div>
                <div class="mycar" @click="goUrlshopping()">
                    我的购物车
                </div>
            </div>
        </div>
        <div class="guess-you-like">
            <p><i class="el-icon-message-solid"></i>疫情期间，为了保证食材的新鲜与安全，可能有些食物材料不齐全，望大家谅解。</p>
        </div>
        <div id="5" class="all-discuss">
            <h2>全部评论</h2>
            <a href="##" @click="goUrlwritePj()" style="text-decoration: none">
                <i class="el-icon-edit-outline" ></i>我也要评论</a>
            <div class="discusses" v-for="(u,index) in Store[sto].evaluation" :key="index">
                <p>{{u.name}}</p>
                <p>
                    <template v-for="(value,s) in u.starAry">
                        <template v-if="s==0  && value>0">
                            <span  class="iconfont icon-star-full" v-for="idx of value"></span>
                        </template>
                        <span  class="iconfont icon-star-half" v-if="s==1 && value>0"></span>
                    </template>
                    <span class="date">{{u.date}}</span>
                </p>
                <p class="discuss-area">{{u.area}}</p>
                <template v-show="u.img !== undefined && u.img != null && u.img.length >0">
                    <p class="imgpl" v-for="imgs in u.img">
                        <img :src="require('@/'+imgs.imgpl)" height="80" width="80"/>
                    </p>
                </template>
            </div>
        </div>
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        <with-us></with-us>
    </div>
</template>

<script>
    import HeadGo from "@/components/HeadGo";
    import Store from "@/assets/data/storePage.json";
    import WithUs from "@/components/WithUs";
    export default {
        name: "StorePage",
        components:{HeadGo,Store,WithUs},
        data(){
            return{
                flag:true,
                radio:3,
                Store:Store.store,
                sto:''
            }
        },
        created() {
            this.sto=this.$route.params.store_id
        },
        methods:{
            goUrlwritePj(){
                this.$router.push({path: '/writePj'})
            },
            setStars(Store){
                Store.forEach((u,key)=>{
                    //console.log(u.star,key)
                    if(u.stars % 1 ==0){
                        this.Store[key].starAry=[u.stars,0,5-u.stars]
                    }else {
                        this.Store[key].starAry=[parseInt(u.stars),1,4-parseInt(u.stars)]
                    }
                })
            },
            goUrlshopping(){
                this.$router.push({path:'/shopping'})
            }
        }
    }
</script>

<style scoped>
    .spxq{
        width: 800px;
        height: 300px;
        margin: 40px auto;
        background: #f8f8f8;
    }
    .spxq img{
        float: left;
    }
    .go-car{
        float: right;
        //border: 1px solid black;
        width: 395px;
        height: 300px;
        text-align: left;
    }
    .go-car h2{
        margin-top: 30px;
    }
    .go-car p{
        font-size: 12px;
        margin:10px 0 0 60px;
        display: inline-block;
    }
    /deep/.el-radio__input.is-checked + .el-radio__label {
        color: #056da1 !important;
    }
    /deep/.el-radio__input.is-checked .el-radio__inner{
        background-color: #056da1;
    }
    .choose{
       /* border: 1px solid black;*/
        width: 150px;
        margin: 50px 0 0 100px;
    }
    .go-car button{
        width: 100px;
        height: 40px;
        border-radius: 5px;
        color: white;
        border: none;
        background: #056da1;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 150px;
    }
    .sell{
        //border: 1px solid black;
        float: right;
        color: #726f6f;
        margin-right: 10px;
        font-size: 13px;
    }
    .sell a{
        color: #ff4800;
        text-decoration: none;
    }
    .sell a:visited{
        color:  #ff4800;
    }
    .guess-you-like i{
       color: orange;
        margin-right: 20px;
        font-size: 20px;
    }
    .guess-you-like {
        color: #6a6868;
        text-align: center;
    }
    .all-discuss{
        width: 1000px;
        border: 3px solid #056da1;
        margin: 40px auto;
        text-align: left;
        border-radius: 10px;
    }
    .all-discuss h2{
        width: 120px;
        margin-top: 10px;
        text-align: right;
        display: inline-block;
    }
    .all-discuss a{
        float: right;
        margin: 20px 29px 0 0;
    }
    .all-discuss a:visited{
        color: #056da1;
    }
    .discusses{
        padding: 20px;
        border-radius: 10px;
    }
    .discusses:hover{
        background: #f8f8f8;
    }
    .discusses .date{
        float: right;
        font-size: 13px;
        margin-right: 10px;
    }
    .discusses p{
        margin-bottom: 5px;
    }
    .discuss-area{
        font-size: 14px;
    }
    .iconfont{
        color: orange;
    }
    .imgpl{
        width: 80px;
        height: 80px;
        display: inline-block;
        margin-left: 10px;
    }
    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #056da1;
        color: #fff;
    }
    .el-pagination{
        text-align: center;
    }
    .mycar{
        float: right;
        color: #056da1;
        font-size: 14px;
        margin: 50px 10px 10px 0;
    }
</style>